<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../js/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.css">
    <script src="https://cdn.staticfile.org/hls.js/8.0.0-beta.3/hls.min.js"></script>
    <script src="https://cdn.staticfile.org/dplayer/1.25.0/DPlayer.min.js"></script>
</head>
<body>
<h1>this is home page </h1>
<div>
    <video src="https://ru.zhiyuanhongda.com/20200905/xoXmSZjs/1000kb/hls/RGAVTjZv.ts"></video>
</div>

<div class="player" id="player">视频播放</div>
<div class="layui-container">
    <div class="layui-row layui-bg-green" style="text-align: center; font-size: large">
        <div class="layui-col-md4 layui-bg-green" id="newsClick" onclick="newsClick()">
            新闻
        </div>
        <div class="layui-col-md4 layui-bg-gray">
            事件
        </div>
        <div class="layui-col-md4 layui-bg-blue">
            视频
        </div>
    </div>
    <div class="layui-row layui-bg-red">
        <div class="layui-col-md9">
            你的内容 9/12
        </div>
        <div class="layui-col-md3">
            你的内容 3/12
        </div>
    </div>

    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">输入框</label>
            <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">辅助文字</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked>
                <input type="checkbox" name="like[dai]" title="发呆">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开关</label>
            <div class="layui-input-block">
                <input type="checkbox" name="switch" lay-skin="switch">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>

<script src="../js/layui-v2.5.6/layui/layui.all.js"></script>
<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;

        layer.msg('Hello World');


    });

    function newsClick(e) {
        console.log(e);
        layer.msg("this is news msg ..");
    }

    let num = '0';

    let dp = new DPlayer({
        element: document.getElementById('player'),
        autoplay: true,
        video: {
            url: "https://video.jializyw.com:8800/20200714/8ePgbAI8/index.m3u8",
            pic: "http://tp.jializyw.com/upload/vod/20200719-1/a0ea1ece3c5e85a3933c605264f42514.jpg",
        },
        highlight: [
            {
                time: num==0?60:0,
                text: '次数用完只能播放60秒',
            },
        ],
    });

    function hidden_warning() {
        $('#warning').slideUp(600)
    }

    $(function () {
        if(num == 0){
            $('#warning').slideDown(600);
        }
    });

    if(num == 0){
        dp.on('timeupdate', function () {
            if (dp.video.currentTime > 60) {
                dp.pause();
                dp.video.currentTime = 0;

            }
        });
    }

</script>
</html>